<template>
  <!-- 我的-签到 -->
  <view class="signIn public">
    <view class="header">
      <view class="" @click="JumpReturnArrow">
        <uni-icons type="back" size="50rpx"></uni-icons>
      </view>
      <view class=""></view>
    </view>
    <view class="title">
      <view class="title-title">
        <image src="../../../static/my/signIn/font.png" mode=""></image>
      </view>
      <!-- <view class="title-notes"> 签到7天积分额外赠送 </view> -->
    </view>
    <view class="main">
      <!-- 可用积分和去兑换 -->
      <view class="main-title flexjcsb">
        <view class="main-title-left">
          <view class="">
            <!-- 可用积分：<text>{{TotalPoints}}</text> -->
            可用积分：<text>{{ point }}</text>
          </view>
        </view>
        <view class="main-title-right" @click="JumpPointsMall">
          去兑换<uni-icons type="right" size="20rpx" color="#F25313"></uni-icons>
        </view>
      </view>
      <!-- 签到天数 -->
      <view class="main-content">
        <!-- 签到的天数 -->
        <view class="main-content-item" v-for="(item, index) in arr" :key="index">
          <view :class="signlnDays >= item.day ? 'SelectedStyle' : ''">
            <!-- 从第一天到第六天 -->
            <view class="one">
              <view class="main-content-item-days"> 第{{ item.day }}天 </view>
              <view class="main-content-item-image">
                <view class="main-content-item-image-outside flexjcc">
                  <view class="main-content-item-image-within flexjcc">
                    +{{ item.point }}
                  </view>
                </view>
              </view>
              <view class="add-integral"> +{{ item.point }}积分 </view>
            </view>

          </view>
        </view>
      </view>
      <!-- 签到规则 -->
      <view class="Check-inRulesBox flexjcsb">
        <view class="Check-inRulesBox-left" @click="JumpCheckInRules">
          <view class="Check-inRulesBox-left-icon"> ! </view>
          <view class=""> 签到规则 </view>
        </view>
        <view class="Check-inRulesBox-right">
          <view class=""> 签到提醒 </view>
          <view class="">
            <switch color="#da5019" style="transform: scale(0.6)" />
          </view>
        </view>
      </view>
      <button class="buttonBox" :class="signln == 1 ? 'signedIn' : 'noSignln'" @click="SignInImmediately">
        <view class="">
          <view class="buttonBox-title">
            {{ signln == 0 ? "立即签到" : "已签到" }}
          </view>
          <view class="buttonBox-notes"> 本月累计签到{{ signlnDays }}天 </view>
        </view>
      </button>
    </view>
  </view>
</template>

<script>
const $api = require("@/utils/request.js").API;
export default {
  data() {
    return {
      arr: [],
      signlnArr: [],
      signlnDays: 0, // 签到多少天
      signln: 0,
      signlns: [],
      // TotalPoints: 0,	// 总积分
      point: "",
      signInStatus: 0,
    };
  },
  onLoad(options) {
    this.point = options.point;
    this.signCheckInOrNot();
    this.signInSetUp();
    this.signInRecord();
    // const currentDate = new Date()
    // const startTime = new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate(),0,0,0,0)
    // const endTime=new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate(),23,59,59,999)
  },
  computed: {
    TotalPoints() {
      let num = 0;
      this.arr.forEach((item) => {
        if (item.is_use) {
        }
      });
      return num;
    },
  },
  methods: {
    // 立即签到
    SignInImmediately() {
      if (this.signln == 1) {
        return;
      }
      // this.arr[today - 1] = true
      $api
        .postSignIn({
          // token: uni.getStorageSync('token'),
        })
        .then((res) => {
          this.signln = 1;
          this.signInStatus = res.data.data;
          uni.showToast({
            title: "签到成功",
            icon: "success",
            duration: 2000,
          });
        });
    },
    signInRecord() {
      $api.postSignInRecord({}).then((res) => {
        this.signlnDays = res.data.data.length;
        // this.signlns.push()
      });
    },
    signInSetUp() {
      $api.postSignInSetUp({}).then((res) => {
        this.arr = res.data.data.value.reward;
        this.signlnArr = res.data.data;
      });
    },
    signCheckInOrNot() {
      $api
        .postsignCheckInOrNot({
          // token: uni.getStorageSync('token')
        })
        .then((res) => {
          if (res.data.code == 0) {
            // 1是当天已签到，0未签到
            this.signln = res.data.data;
          }
        });
    },
    // 返回上一级页面
    JumpReturnArrow() {
      uni.navigateBack();
      // uni.reLaunch({
      // 	url:'../../my/myView'
      // })
    },
    // 跳转签到规则
    JumpCheckInRules() {
      uni.navigateTo({
        url: "../../my/signIn/Check-inRules",
      });
    },
    // 跳转兑换
    JumpPointsMall() {
      uni.navigateTo({
        url: "../../../pages_my/my/giveServiceTo/PointsMall",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.SelectedStyle {
  width: 100%;
  height: 100%;
  box-shadow: 0rpx 16rpx 24rpx 0rpx rgba(201, 201, 201, 0.34);
  border-radius: 20rpx;
  background: #f25415;

  .main-content-item-days {
    color: white;
  }

  .add-integral {
    color: white !important;
  }
}

.signIn {
  position: relative;
  background: #fbfbfb;

  .header {
    position: absolute;
    // top: 25rpx;
    // top: 50rpx;
    top: 80rpx;
    left: 45rpx;
    z-index: 1;
  }

  .title {
    position: relative;
    width: 750rpx;
    height: 562rpx;
    text-align: center;
    background: url("../../../static/my/signIn/headerBackground.png") no-repeat;
    background-size: 100% 100%;

    .title-title {
      // padding-top: 39rpx;
      padding-top: 227rpx;

      image {
        width: 589rpx;
        height: 121rpx;
      }
    }

    .title-notes {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 20rpx;
    }
  }

  .main {
    position: absolute;
    width: 702rpx;
    top: 400rpx;
    left: 24rpx;
    // bottom: 20rpx;
    background: #ffffff;
    box-shadow: 0rpx 16rpx 24rpx 0rpx rgba(201, 201, 201, 0.34);
    border-radius: 20rpx;
    margin: auto;

    // 可用积分
    .main-title {
      padding: 42rpx 22rpx 33rpx 22rpx;

      .main-title-left {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;

        text {
          color: #f25415;
        }
      }

      .main-title-right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120rpx;
        height: 28rpx;
        background: #f3f3f3;
        border-radius: 14rpx;
        font-size: 19rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #f25313;
      }
    }

    // 签到天数
    .main-content {
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
      padding: 0rpx 22rpx 33rpx 22rpx;

      .main-content-item {
        width: 149rpx;
        height: 164rpx;
        background: #efeff1;
        border-radius: 16rpx;
        margin: 0 8rpx;

        margin-bottom: 28rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;

        .main-content-item-days {
          padding-top: 20rpx;
        }

        // 中间的小圆球
        .main-content-item-image {

          // 外圈
          .main-content-item-image-outside {
            width: 62.1rpx;
            height: 62.1rpx;
            background: linear-gradient(0deg, #ffbf06, #fff26a);
            box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(207, 207, 207, 0.6);
            border-radius: 50%;

            // 内圈
            .main-content-item-image-within {
              width: 48.3rpx;
              height: 48.3rpx;
              background: linear-gradient(0deg, #ff9101, #ffcf32);
              border-radius: 50%;
              color: #991b00;
            }
          }
        }

        // 单-从第一天到第六天
        .one {
          .main-content-item-days {
            text-align: center;
          }

          .main-content-item-image {
            display: flex;
            justify-content: center;
            padding: 12rpx 0 3rpx 0;
          }

          .add-integral {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            text-align: center;
          }
        }
      }

      // .main-content-item:last-child {
      //   width: 320rpx;
      // }
    }

    // 签到规则
    .Check-inRulesBox {
      font-size: 25rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      padding: 0 26rpx 0 22rpx;

      .Check-inRulesBox-left {
        display: flex;

        .Check-inRulesBox-left-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 35rpx;
          height: 35rpx;
          background: #ececec;
          border-radius: 50%;
          font-size: 28rpx;
          color: #cacaca;
          margin-right: 10rpx;
        }
      }

      .Check-inRulesBox-right {
        display: flex;
        align-items: center;
      }
    }

    // 立即签到按钮
    .buttonBox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 435rpx;
      height: 110rpx;
      border-radius: 55rpx;
      margin: auto;
      margin-top: 51rpx;
      margin-bottom: 52rpx;
      text-align: center;

      .buttonBox-title {
        font-size: 41rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 33rpx;
        padding-bottom: 11rpx;
      }

      .buttonBox-notes {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 33rpx;
      }
    }

    // 未签到
    .noSignln {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 435rpx;
      height: 110rpx;
      background: #f14500;
      box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(235, 85, 53, 0.3);
      border-radius: 55rpx;
      margin: auto;
      margin-top: 51rpx;
      margin-bottom: 52rpx;
      text-align: center;

      .buttonBox-title {
        font-size: 41rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 33rpx;
        padding-bottom: 11rpx;
      }

      .buttonBox-notes {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 33rpx;
      }
    }

    // 已签到
    .signedIn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 435rpx;
      height: 110rpx;
      background: #efeff1;
      // box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(235,85,53,0.3);
      border-radius: 55rpx;
      margin: auto;
      margin-top: 51rpx;
      margin-bottom: 52rpx;
      text-align: center;

      .buttonBox-title {
        font-size: 41rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #303133;
        line-height: 33rpx;
        padding-bottom: 11rpx;
      }

      .buttonBox-notes {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #303133;
        line-height: 33rpx;
      }
    }
  }

  .SelectedStyle {
    width: 100%;
    height: 100%;
    box-shadow: 0rpx 16rpx 24rpx 0rpx rgba(201, 201, 201, 0.34);
    border-radius: 20rpx;
    background: #f25415;

    .main-content-item-days {
      color: white;
    }

    .add-integral {
      color: white !important;
    }
  }

  .signIn {
    position: relative;
    background: #fbfbfb;

    .header {
      position: absolute;
      // top: 25rpx;
      // top: 50rpx;
      top: 80rpx;
      left: 45rpx;
      z-index: 1;
    }

    .title {
      position: relative;
      width: 750rpx;
      height: 562rpx;
      text-align: center;
      background: url("../../../static/my/signIn/headerBackground.png") no-repeat;
      background-size: 100% 100%;

      .title-title {
        // padding-top: 39rpx;
        padding-top: 227rpx;

        image {
          width: 589rpx;
          height: 121rpx;
        }
      }

      .title-notes {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 20rpx;
      }
    }

    .main {
      position: absolute;
      width: 702rpx;
      top: 400rpx;
      left: 24rpx;
      // bottom: 20rpx;
      background: #ffffff;
      box-shadow: 0rpx 16rpx 24rpx 0rpx rgba(201, 201, 201, 0.34);
      border-radius: 20rpx;
      margin: auto;

      // 可用积分
      .main-title {
        padding: 42rpx 22rpx 33rpx 22rpx;

        .main-title-left {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;

          text {
            color: #f25415;
          }
        }

        .main-title-right {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120rpx;
          height: 28rpx;
          background: #f3f3f3;
          border-radius: 14rpx;
          font-size: 19rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #f25313;
        }
      }

      // 签到天数
      .main-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0rpx 22rpx 33rpx 22rpx;

        .main-content-item {
          width: 149rpx;
          height: 164rpx;
          background: #efeff1;
          border-radius: 16rpx;
          margin-bottom: 28rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;

          .main-content-item-days {
            padding-top: 20rpx;
          }

          // 中间的小圆球
          .main-content-item-image {

            // 外圈
            .main-content-item-image-outside {
              width: 62.1rpx;
              height: 62.1rpx;
              background: linear-gradient(0deg, #ffbf06, #fff26a);
              box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(207, 207, 207, 0.6);
              border-radius: 50%;

              // 内圈
              .main-content-item-image-within {
                width: 48.3rpx;
                height: 48.3rpx;
                background: linear-gradient(0deg, #ff9101, #ffcf32);
                border-radius: 50%;
                color: #991b00;
              }
            }
          }

          // 单-从第一天到第六天
          .one {
            .main-content-item-days {
              text-align: center;
            }

            .main-content-item-image {
              display: flex;
              justify-content: center;
              padding: 12rpx 0 3rpx 0;
            }

            .add-integral {
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #999999;
              text-align: center;
            }
          }


        }

        .main-content-item:last-child {
          width: 320rpx;
        }
      }

      // 签到规则
      .Check-inRulesBox {
        font-size: 25rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        padding: 0 26rpx 0 22rpx;

        .Check-inRulesBox-left {
          display: flex;

          .Check-inRulesBox-left-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 35rpx;
            height: 35rpx;
            background: #ececec;
            border-radius: 50%;
            font-size: 28rpx;
            color: #cacaca;
            margin-right: 10rpx;
          }
        }

        .Check-inRulesBox-right {
          display: flex;
          align-items: center;
        }
      }

      // 立即签到按钮
      .buttonBox {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 435rpx;
        height: 110rpx;
        border-radius: 55rpx;
        margin: auto;
        margin-top: 51rpx;
        margin-bottom: 52rpx;
        text-align: center;

        .buttonBox-title {
          font-size: 41rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 33rpx;
          padding-bottom: 11rpx;
        }

        .buttonBox-notes {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 33rpx;
        }
      }

      // 未签到
      .noSignln {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 435rpx;
        height: 110rpx;
        background: #f14500;
        box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(235, 85, 53, 0.3);
        border-radius: 55rpx;
        margin: auto;
        margin-top: 51rpx;
        margin-bottom: 52rpx;
        text-align: center;

        .buttonBox-title {
          font-size: 41rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 33rpx;
          padding-bottom: 11rpx;
        }

        .buttonBox-notes {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 33rpx;
        }
      }

      // 已签到
      .signedIn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 435rpx;
        height: 110rpx;
        background: #efeff1;
        // box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(235,85,53,0.3);
        border-radius: 55rpx;
        margin: auto;
        margin-top: 51rpx;
        margin-bottom: 52rpx;
        text-align: center;

        .buttonBox-title {
          font-size: 41rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #303133;
          line-height: 33rpx;
          padding-bottom: 11rpx;
        }

        .buttonBox-notes {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #303133;
          line-height: 33rpx;
        }
      }
    }
  }
}
</style>